<template>
  <view class="u-flex wh-200 wflex-between wpr-20">
    <view class="u-flex">
      <view class="wh-80 wtext-align-center wbg-blue">{{ currentType }}</view>
      <view class="wml-20"> {{ listItem.name }}</view>
    </view>
    <u-button class="wh-40" @click="toDetail">打开</u-button>
  </view>
</template>

<script>
export default {
  props: {
    listItem: Object,
  },
  computed: {
    currentType() {
      return this.listItem.suffix.substring(0, 1).toUpperCase();
    },
  },
  data() {
    return {};
  },
  methods: {
    toDetail() {
      console.log(this.listItem);
      this.$store.commit("setData", {
        localFile: this.listItem,
      });
      uni.navigateTo({
        url: "/pages/luckysheet/luckysheetdetail",
      });
    },
  },
};
</script>
<style lang="less" scoped>
.wh-200 {
  min-height: 48rpx;
}
.ww-200 {
  width: 48rpx;
}
.wh-80 {
  height: 40rpx;
  width: 40rpx;
  line-height: 40rpx;
  color: #fff;
  font-size: 36rpx;
}
.wtext-align-center {
  text-align: center;
}
.wbg-blue {
  background: blueviolet;
  flex: none;
}
.wml-20 {
  margin-left: 20rpx;
  font-size: 24rpx;
  flex: auto;
}
.wh-40 {
  height: 40rpx;
  flex: none;
}
.wflex-between {
  justify-content: space-between;
}
.wpr-20 {
  padding-right: 20rpx;
}
</style>
